<template>
  <div class="batch-convert-container">
    <div class="page-header">
      <h2>📚 批量转换</h2>
      <p>同时转换多个文件，提高工作效率</p>
    </div>

    <div class="convert-form" if.bind="!isLoading">
      <!-- 文件上传区域 -->
      <div class="upload-section">
        <div class="upload-area" 
             dragover.trigger="onDragOver($event)" 
             drop.trigger="onDrop($event)">
          <div class="upload-content">
            <div class="upload-icon">📁</div>
            <h3>选择多个文件或拖拽到此处</h3>
            <p>支持 Word、Markdown、PDF、TXT 格式</p>
            <input type="file" 
                   id="batchFileInput" 
                   multiple
                   change.trigger="onFilesSelected($event)"
                   style="display: none;">
            <button type="button" 
                    class="btn btn-primary"
                    click.trigger="document.getElementById('batchFileInput').click()">
              选择文件
            </button>
          </div>
        </div>
      </div>

      <!-- 已选文件列表 -->
      <div class="selected-files" if.bind="selectedFiles.length > 0">
        <h3>已选择的文件 (${selectedFiles.length})</h3>
        <div class="file-list">
          <div class="file-item" repeat.for="file of selectedFiles">
            <div class="file-info">
              <span class="file-icon">${getFormatIcon(file.format)}</span>
              <div class="file-details">
                <div class="file-name">${file.name}</div>
                <div class="file-meta">${file.size} • ${getFormatLabel(file.format)}</div>
              </div>
            </div>
            <div class="file-status">
              <span class="status-badge ${file.status}">${file.status}</span>
            </div>
            <button type="button" 
                    class="btn-remove"
                    click.trigger="removeFile($index)"
                    title="移除文件">
              ✕
            </button>
          </div>
        </div>
        <div class="files-summary">
          <span>总大小: ${getTotalFileSize()}</span>
        </div>
      </div>

      <!-- 转换设置 -->
      <div class="conversion-settings" if.bind="selectedFiles.length > 0">
        <h3>转换设置</h3>
        <div class="settings-row">
          <div class="setting-group">
            <label>源格式</label>
            <div class="format-display">
              <span class="format-icon">${getFormatIcon(sourceFormat)}</span>
              <span>${getFormatLabel(sourceFormat)}</span>
            </div>
          </div>
          <div class="setting-group">
            <label for="targetFormat">目标格式</label>
            <select id="targetFormat" 
                    value.bind="targetFormat"
                    class="form-select">
              <option value="">请选择目标格式</option>
              <option repeat.for="format of getAvailableTargetFormats()" 
                      value.bind="format.value">
                ${format.icon} ${format.label}
              </option>
            </select>
          </div>
        </div>
      </div>

      <!-- 转换按钮 -->
      <div class="convert-actions" if.bind="selectedFiles.length > 0 && targetFormat">
        <button type="button" 
                class="btn btn-success btn-large"
                click.trigger="convertFiles()"
                disabled.bind="isConverting">
          <span if.bind="!isConverting">🚀 开始批量转换</span>
          <span if.bind="isConverting">⏳ 转换中... ${convertProgress}%</span>
        </button>
        <button type="button" 
                class="btn btn-secondary"
                click.trigger="resetForm()"
                disabled.bind="isConverting">
          重置
        </button>
      </div>

      <!-- 转换进度 -->
      <div class="progress-section" if.bind="isConverting">
        <div class="progress-bar">
          <div class="progress-fill" style.bind="'width: ' + convertProgress + '%'"></div>
        </div>
        <p>正在转换文件... ${convertProgress}%</p>
      </div>

      <!-- 转换结果 -->
      <div class="results-section" if.bind="convertResults.length > 0">
        <h3>转换结果</h3>
        <div class="results-summary">
          <span class="success-count">成功: ${getSuccessCount()}</span>
          <span class="error-count">失败: ${getErrorCount()}</span>
          <button type="button" 
                  class="btn btn-primary"
                  click.trigger="downloadAllResults()"
                  if.bind="getSuccessCount() > 0">
            📥 下载所有文件
          </button>
        </div>
        <div class="results-list">
          <div class="result-item" repeat.for="result of convertResults">
            <div class="result-info">
              <span class="result-icon">
                ${result.status === 'success' ? '✅' : '❌'}
              </span>
              <div class="result-details">
                <div class="result-name">${result.originalName}</div>
                <div class="result-meta" if.bind="result.status === 'success'">
                  ${result.size}
                </div>
                <div class="result-error" if.bind="result.status === 'error'">
                  ${result.error}
                </div>
              </div>
            </div>
            <button type="button" 
                    class="btn btn-sm btn-primary"
                    click.trigger="downloadResult(result)"
                    if.bind="result.status === 'success'">
              下载
            </button>
          </div>
        </div>
      </div>

      <!-- 错误信息 -->
      <div class="error-message" if.bind="errorMessage">
        <div class="alert alert-error">
          <span class="alert-icon">⚠️</span>
          <span class="alert-text">${errorMessage}</span>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="loading-state" if.bind="isLoading">
      <div class="loading-spinner"></div>
      <p>正在初始化...</p>
    </div>
  </div>
</template> 